<template>
  <view class="container">
    <view class="top-bg"></view>
    <view class="house-info">
      <view class="house-title">
        <text class="house-name">{{ bName }}
          <text class="house-status" :class="isTsyfwinfo.fFwzt == 1 ? '' : 'house-status-active'"
            v-if="isTsyfwinfo.fFwzt">{{ isTsyfwinfo.fFwzt == 1 ? "已出租" : "未出租" }}</text></text>
        <text class="house-address">{{ roomName }}</text>
      </view>

      <u-line color="#DFDDDD" margin="23rpx 0 32rpx 0"></u-line>
      <!-- <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">房屋类别:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwlbName }}</view>
        </view>
        <view class="i-right">
          <view class="i-label">房屋性质:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwxzName }}</view>
        </view>
      </view> -->
      <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">房屋类型:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwlxName }}</view>
        </view>
      </view>
      <view class="item-wrapper">
        <view class="i-right">
          <view class="i-label">房屋用途:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwytName ? isTsyfwinfo.fFwytName : "暂未添加" }}</view>
        </view>
        <!-- <view class="i-left">
          <view class="i-label">房屋间数:</view>
          <view class="i-value">{{
            isTsyfwinfo.fFwjs ?`${isTsyfwinfo.fFwjs}间` : "暂未添加"
          }}</view>
        </view>
        <view class="i-right">
          <view class="i-label">房屋面积:</view>
          <view class="i-value">{{
            isTsyfwinfo.fFwmj ? `${isTsyfwinfo.fFwmj.toFixed(2)}㎡` : "暂未添加"
          }}</view>
        </view> -->
      </view>

      <view class="item-wrapper">
        <!--    <view class="i-left">
          <view class="i-label">房屋产权号:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwcqh || "暂未添加" }}</view>
        </view> -->
        <view class="i-right">
          <view class="i-label">房屋负责人:</view>
          <navigator :url="`/actual_real_estate/house_manager_detail?item=${JSON.stringify(
              policeHouseMainsList
            )}`">
            <view class="i-value house-owner">
              <!--1 是托管人-->
              查看>
            </view>
          </navigator>
        </view>
      </view>
      <u-line color="#DFDDDD" margin="0 0 23rpx 0"></u-line>
      <view class="item-wrapper">
        <view class="i-right">
          <view class="i-label">采集人员:</view>
          <view class="i-value">{{
            `${isTsyfwinfo.fCjrxm}(${isTsyfwinfo.fCjrxmType})`
          }}</view>
        </view>
      </view>
      <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">采集时间:</view>
          <view class="i-value">{{
              isTsyfwinfo.fCjsj
                ? moment(isTsyfwinfo.fCjsj).format("yyyy-MM-DD HH:mm:ss")
                : ""
            }}
          </view>
        </view>
      </view>
      <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">所属辖区:</view>
          <view class="i-value">{{ isTsyfwinfo.policeJurisdictionId }}</view>
        </view>
      </view>
    </view>
    <view class="person-info" v-if="(housePopulationlist.length ) || ['fj', 'wgy'].includes(role)">
      <view class="person-title"> {{personTitle}} </view>
      <view class="person-item-wrap">
        <view class="person-item" v-for="item in housePopulationlist">
          <image :src="item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`"
            @click="pvwImage([item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`])">
          </image>
          <view class="person-item-content">
            <view class="person-name">
              <view class="label">居民姓名:</view>
              <view class="value">{{ item.fXm }}</view>
              <view class="check-detail" @click="handleClickRouter"
                :data-url="`/actual_person/actual_person_detail?fId=${item.fId}&roomName=${roomName}&isMain=${options.isMain}`">
                查看详情 ></view>
            </view>
            <view class="person-name person-idcard">
              <view class="label">身份证号:</view>
              <view class="value">{{ encryptIDCard(item.fGmsfhm) }}</view>
            </view>
            <view class="person-name person-house-owner-relationship">
              <view class="label">与房主关系:</view>
              <view class="value">
                {{ item.fCjrxmType }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="person-info" v-if="listRecontract.length">
      <view class="person-title"> 租房信息</view>

      <view class="house-item-wrap">
        <view class="house-item" v-for="item in listRecontract" @click="handleClickRouter" :data-url="`/rentalHousing/rental_information?item=${JSON.stringify(
            item
          )}&bName=${bName}&roomName=${roomName}&type=租房`">
          <view class="time-style">
            <view class="left">
              <u-icon name="calendar" color="#A2A2A2"></u-icon>
              <text>{{ item.createTime }}</text>
            </view>
            <view class="right">
              <u-icon name="arrow-right" color="#A2A2A2"></u-icon>
            </view>
          </view>

          <view class="info-row">
            <view class="label">出租人员:</view>
            <view class="value">{{ item.hostName }}</view>
          </view>

          <view class="info-row">
            <view class="label">承租人员:</view>
            <view class="value">{{ item.name.join("、") }}</view>
          </view>

          <view class="info-row">
            <view class="label">租房时间:</view>
            <view class="value">{{ item.beginTime.split(" ")[0] }} -
              {{ item.endTime.split(" ")[0] }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="person-info"
      v-if="(historical_contracts.length && options.isMain == 1) ||  historical_contracts.length && ['fj', 'wgy'].includes(role)">
      <view class="person-title" style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        " @click="handleClickRouter"
        :data-url="`/rentalHousing/history_rental?fHouseid=${fHouseid}&bName=${bName}&roomName=${roomName}`">
        <text>历史租房信息</text>
        <text style="
            font-weight: 500;
            font-size: 26rpx;
            color: #aaaaaa;
            padding-right: 20rpx;
          ">查看全部></text>
      </view>

      <view class="house-item-wrap">
        <view class="house-item" v-for="item in historical_contracts" @click="handleClickRouter" :data-url="`/rentalHousing/rental_information?item=${JSON.stringify(
            item
          )}&bName=${bName}&roomName=${roomName}&type=历史`">
          <view class="time-style">
            <view class="left">
              <u-icon name="calendar" color="#A2A2A2"></u-icon>
              <text>{{ item.createTime }}</text>
            </view>
            <view class="right">
              <u-icon name="arrow-right" color="#A2A2A2"></u-icon>
            </view>
          </view>

          <view class="info-row">
            <view class="label">出租人员:</view>
            <view class="value">{{ item.hostName }}</view>
          </view>

          <view class="info-row">
            <view class="label">承租人员:</view>
            <view class="value">{{ item.name.join("、") }}</view>
          </view>

          <view class="info-row">
            <view class="label">租房时间:</view>
            <view class="value">{{ item.beginTime.split(" ")[0] }} -
              {{ item.endTime.split(" ")[0] }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns" v-if="options.isMain == 1 || ['fj', 'wgy'].includes(role)">
      <button class="submit-btn" type="primary" @click="handleClickRouter"
        :data-url="`/rentalHousing/add_rental_info?fHouseid=${fHouseid}&fDzbm=${isTsyfwinfo.fSsjzwdyfwDzbm}&isMain=${options.isMain}`"
        icon="map" style="width: 100%">
        添加租房信息
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    handleClickRouter,
    pvwImage,
    encryptIDCard
  } from "@/utils/util.js";
  import moment from "@/utils/moment.js";
  export default {
    data() {
      return {
        fHouseid: "",
        bName: "",
        roomName: "",
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        isTsyfwinfo: {},
        housePopulationlist: [],
        house_nature: [],
        house_category: [],
        house_type: [],
        is_important_house: [],
        house_use: [],
        homeowner_relationship: [],
        is_house_owner: [],
        listRecontract: [],
        historical_contracts: [],
        options: {},
        policeHouseMainsList: {},
        role: uni.getStorageSync('role')
      };
    },
    computed: {
      personTitle() {
        // mini 
        if (this.role === 'mini') {
          return this.options.isMain == 1 ? '现居人员' : '我的人口信息'
        } else {
          return '现居人员'
        }
      }
    },
    onLoad(options) {
      this.fHouseid = options.fHouseid;
      this.bName = options.bName;
      this.roomName = options.roomName;
      this.options = options
    },
    onShow() {
      this.getList();
      if (this.options.isMain == 1 || ['fj', 'wgy'].includes(this.role)) {
        this.get_historical_contracts();
      }
    },
    onUnload() {
      uni.$off("add_rental_info_success");
    },
    methods: {
      encryptIDCard,
      moment,
      handleClickRouter,
      pvwImage,
      async getList() {
        const {
          result: {
            housePopulationlist,
            isTsyfwinfo,
            listRecontract,
            policeHouseMainsList
          },
        } = await getAction("/rentinghouse/rentingHouseInfo", {
          fHouseid: this.fHouseid,
          isMain: this.options.isMain
        });

        this.housePopulationlist = housePopulationlist || [];
        this.isTsyfwinfo = isTsyfwinfo;
        this.listRecontract = listRecontract;
        this.policeHouseMainsList = policeHouseMainsList
      },
      async get_historical_contracts() {
        const {
          result
        } = await getAction("/rentinghouse/historicalContracts", {
          id: this.fHouseid,
          pageNo: 1,
          pageSize: 99999,
        });
        this.historical_contracts = result.records;
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .u-icon>text {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
    font-weight: blod !important;
  }

  .container {
    background: #f9f9f9;
    padding: 0 19rpx;
    padding-top: 220rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 100rpx;

    .top-bg {
      width: 100%;
      height: 460rpx;
      background: url($baseImgUrl + "shiyoufangwu4.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      position: absolute;
      top: 0;
      left: 0;
    }

    .house-info {
      width: 712rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      z-index: 1;

      padding: 40rpx 20rpx 0 20rpx;

      position: relative;

      .key-house {
        width: 55rpx;
        height: 128rpx;
        position: absolute;
        top: 0;
        right: 26rpx;
        transform: translateY(-12rpx);
      }

      .house-title {
        flex: 1;
        display: flex;
        padding: 0 16rpx;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 30rpx;

        .house-name {
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
        }

        .house-address {
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
        }

        .house-status {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 22rpx;
          color: #0a66cc;
          padding: 3rpx 7rpx;
          background: #eef6fd;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-left: 20rpx;
        }

        .house-status-active {
          color: #ffaf26;
          background: #fff6e6;
        }
      }

      .item-wrapper {
        display: flex;
        margin-bottom: 21rpx;

        .i-left,
        .i-right {
          flex: 1;
          display: flex;
        }

        .i-label {
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
          margin-right: 4rpx;
          flex-shrink: 0;
        }

        .i-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }

        .house-owner {
          color: #2488f5;
        }
      }
    }

    .person-info {
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 712rpx;
      // height: 530rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin: 10rpx 0;
      padding: 22rpx 12rpx;

      .person-title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        padding-bottom: 16rpx;
        padding-left: 27rpx;
        border-bottom: 1rpx solid #e8e8e8;
      }

      .person-item-wrap {
        flex: 1;
        overflow: scroll;

        .person-item {
          width: 680rpx;
          height: 195rpx;
          background: #f9f9f9;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 1rpx solid #eceaea;

          margin: 10rpx 0;
          padding: 22rpx 26rpx;

          &:nth-of-type(1) {
            margin-top: 24rpx;
          }

          display: flex;

          image {
            width: 163rpx;
            height: 152rpx;
          }

          .person-item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .person-name {
              display: flex;
              align-items: center;
            }

            .label {
              width: 160rpx;
              text-align: right;
              font-weight: 500;
              font-size: 28rpx;
              color: #aaaaaa;
            }

            .value {
              font-weight: 500;
              font-size: 26rpx;
              color: #333333;
              margin-left: 16rpx;
            }

            .check-detail {
              flex: 1;
              font-weight: 400;
              font-size: 24rpx;
              color: #a5a5a5;
              text-align: right;
            }
          }
        }
      }

      .house-item-wrap {
        flex: 1;
        overflow: scroll;

        .house-item {
          width: 680rpx;
          height: 280rpx;
          background: #f9f9f9;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 1rpx solid #eceaea;

          margin: 10rpx 0;
          padding: 22rpx 26rpx;

          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .time-style {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #eceaea;
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
            padding-bottom: 18rpx;

            .left {
              display: flex;
              align-items: center;
              justify-content: space-between;

              text {
                margin-left: 15rpx;
              }
            }
          }

          .info-row {
            display: flex;
            align-items: center;

            .label {
              min-width: 120rpx;
              font-weight: 400;
              font-size: 26rpx;
              color: #a2a0a0;
            }

            .value {
              font-weight: 400;
              font-size: 26rpx;
              color: #6b6b6b;
              margin-left: 15rpx;
            }
          }
        }
      }

      .check-detail {
        flex: 1;
        font-weight: 400;
        font-size: 24rpx;
        color: #a5a5a5;
        text-align: right;
      }
    }

    .btns {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 123rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
</style>